<template>
  <star-canvas></star-canvas>

  <!--  顶部Logo标题  -->
  <el-header>
    <div class="logo-container">
      <img src="/src/assets/logo.png" alt="Logo" class="logo-img">
      <h1 class="platform-name">关 于 本 站</h1>
    </div>
  </el-header>
  <el-main>

    <!--  本站介绍  -->
    <h1 class="content-title">本站介绍</h1>
    <p class="content-text">本站（学术星河 · AcadGalacy）是由BUAA软件系统分析与设计课程Regulus小组在大作业中开发的一个学术成果分享平台。</p>
    <p class="content-text">本站收录的数据数量如下：</p>
    <platform-statistic :sum_statistics="this.sum_statistics"></platform-statistic>

    <!--  本站Logo  -->
    <h1 class="content-title">Logo</h1>
    <div class="img-container big-img-container">
      <img src="/src/assets/logo.png" alt="Logo" class="big-logo-img">
    </div>

    <!--  数据集介绍  -->
    <h1 class="content-title">数据集介绍</h1>
    <p class="content-text">本站的数据集来源为OpenAlex，通过OpenAlex官方API爬取，主要选择领域为Computer science的文献。</p>
    <p class="content-text">OpenAlex是一个全球科研生态免费开源的索引服务，名字源自古代埃及亚历山大图书馆馆名，共收录了2.5亿部学术作品，以及它们的引文、作者、机构隶属关系等。</p>
    <div class="img-container">
      <a href="https://openalex.org/" target="_blank">
        <img src="/src/assets/img/openalex.webp.jpg" alt="OpenAlex" class="open-alex-img" />
      </a>
    </div>

    <!--  中文翻译支持  -->
    <h1 class="content-title">中文翻译支持</h1>
    <p class="content-text">本站的搜索功能支持中英双语搜索，中文搜索词将被翻译为英文。</p>
    <p class="content-text">翻译结果由有道智云API提供。</p>
    <div class="img-container">
      <a href="https://ai.youdao.com/" target="_blank">
        <img src="/src/assets/img/youdao-logo.jpg" alt="有道智云" class="youdao-img" />
      </a>
    </div>


    <!--  关于我们  -->
    <h1 class="content-title">关于我们</h1>
    <p class="content-text">我们是BUAA软件系统分析与设计课程Regulus小组，由9名成员组成：</p>
    <div class="members-container">
        <p class="member-text" v-for="member in members">{{member.name}}</p>
    </div>

    <!--  联系方式  -->
    <h1 class="content-title">联系方式</h1>
    <p class="content-text">邮箱：xu_haobo@126.com</p>
  </el-main>

</template>

<script>
import StarCanvas from "../components/StarCanvas.vue";
import {req_getStatistics} from "../../../api";
import PlatformStatistic from "../components/PlatformStatistic.vue";

export default {
  name: "AboutView",
  components: {PlatformStatistic, StarCanvas},
  data() {
    return {
      sum_statistics: {},
      members: [
        {
          name: "欢",
          role: "前端",
        },
        {
          name: "M .",
          role: "前端",
        },

        {
          name: "youuu",
          role: "前端",
        },
        {
          name: "BarryXu",
          role: "前端 后端",
        },
        {
          name: "辰Cc",
          role: "后端",
        },
        {
          name: "Strelitzia reginae",
          role: "后端",
        },
        {
          name: "Yuki",
          role: "后端",
        },
        {
          name: "^ ^",
          role: "后端 部署",
        }
      ]
    }
  },
  methods: {
    async getSiatistics(){
      let response = await req_getStatistics();
      let data = response.data;
      console.log(data.sum_statistics)
      if (data.errno === 1) {

        this.sum_statistics = data.sum_statistics;
      }
    },
  },
  mounted() {
    this.getSiatistics();
  }
}
</script>

<style scoped>
@import "/src/views/home-views/css/common.css";

/* 布局 */
.el-header {
  margin: 100px 0 0 0;
  height: 200px;
}

.open-alex-img {
  height: 300px;
}

.youdao-img {
  height: 100px;
}

.img-container {
  display: flex;
  justify-content: center;
}

.big-img-container {
  margin: 50px 0;
}

.big-logo-img {
  height: 400px;
}

.member-text {
  color: var(--text-color);
  font-size: 18px;
  line-height: 30px;
  margin: 0 120px;
}
</style>